<template>
	<el-container style="padding: 20px">
		<el-header>
			<el-upload
				class="upload-demo"
				action="https://jsonplaceholder.typicode.com/posts/"
				:http-request="toUploadFile"
				:limit="1"
				:show-file-list="false"
				:file-list="fileList"
			>
				<el-button size="mini" type="primary" icon="el-icon-upload">点击上传 </el-button>
			</el-upload>
			<el-button :disabled="!tableData.length" style="margin-left:16px;" size="mini" type="primary" icon="el-icon-download" @click="dataExport"
				>数据导出</el-button
			>
		</el-header>
		<el-main
			v-loading="loading"
			element-loading-text="正在校验，请稍等"
			element-loading-spinner="el-icon-loading"
			element-loading-background="rgba(0, 0, 0, 0.2)"
		>
			<div style="margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; padding: 0 5px">
				<el-breadcrumb separator="｜">
					<el-breadcrumb-item>中证网数据(左)</el-breadcrumb-item>
					<el-breadcrumb-item>产品系统数据(右)</el-breadcrumb-item>
				</el-breadcrumb>
				<div class="yuandianpar">
					<div class="yuandianya"></div>
					校验结果不一致
				</div>
			</div>
			<el-table
				:data="tableData"
				border
				style="width: 100%; border: 1px solid #c0c4cc; border-bottom: none"
				:header-cell-style="{ background: '#FAFAFA' }"
			>
				<el-table-column prop="fundCode" label="序号" width="50">
					<template slot-scope="scope">
						{{ scope.$index + 1 }}
					</template>
				</el-table-column>
				<el-table-column prop="fundCode" label="基金代码" width="100">
					<template slot-scope="scope">
						<span v-if="!!scope.row.csDataDTO.fundCode">
							{{ scope.row.csDataDTO.fundCode }}
						</span>
						<span v-else-if="!!scope.row.productInfoDTO.fundCode">
							{{ scope.row.productInfoDTO.fundCode }}
						</span>
					</template>
				</el-table-column>
				<el-table-column prop="fundFullName" label="基金全称" width="500">
					<template slot-scope="scope">
						<div class="shidene">
							<div style="border-right: 1px solid #ebeef5">
								{{ scope.row.csDataDTO.fundFullName }}
							</div>
							<div :class="!scope.row.productInfoDTO.isFundFullNameSame ? '' : 'buyiyangne'">
								{{ scope.row.productInfoDTO.fundFullName }}
							</div>
						</div>
					</template>
				</el-table-column>

				<el-table-column prop="fundName" label="基金简称" width="500">
					<template slot-scope="scope">
						<div class="shidene">
							<div style="border-right: 1px solid #ebeef5">
								{{ scope.row.csDataDTO.fundName }}
							</div>
							<div :class="!scope.row.productInfoDTO.isFundNameSame ? '' : 'buyiyangne'">
								{{ scope.row.productInfoDTO.fundName }}
							</div>
						</div>
					</template>
				</el-table-column>

				<el-table-column prop="operateMode" label="运作方式" width="250">
					<template slot-scope="scope">
						<div class="shidene">
							<div style="border-right: 1px solid #ebeef5">
								{{ scope.row.csDataDTO.operateMode }}
							</div>
							<div :class="!scope.row.productInfoDTO.isOperateModeSame ? '' : 'buyiyangne'">
								{{ scope.row.productInfoDTO.operateMode }}
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="fundType" label="基金类别" width="250">
					<template slot-scope="scope">
						<div class="shidene">
							<div style="border-right: 1px solid #ebeef5">
								{{ scope.row.csDataDTO.fundType }}
							</div>
							<div :class="!scope.row.productInfoDTO.isFundTypeSame ? '' : 'buyiyangne'">
								{{ scope.row.productInfoDTO.fundType }}
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="trusteeName" label="托管人简称" width="400">
					<template slot-scope="scope">
						<div class="shidene">
							<div style="border-right: 1px solid #ebeef5">
								{{ scope.row.csDataDTO.trusteeName }}
							</div>
							<div :class="!scope.row.productInfoDTO.isTrusteeNameSame ? '' : 'buyiyangne'">
								{{ scope.row.productInfoDTO.trusteeName }}
							</div>
						</div>
					</template>
				</el-table-column>

				<el-table-column prop="establishDate" label="产品成立日期" width="250">
					<template slot-scope="scope">
						<div class="shidene">
							<div style="border-right: 1px solid #ebeef5">
								{{ scope.row.csDataDTO.establishDate }}
							</div>
							<div :class="!scope.row.productInfoDTO.isEstablishDateSame ? '' : 'buyiyangne'">
								{{ scope.row.productInfoDTO.establishDate }}
							</div>
						</div>
					</template>
				</el-table-column>

				<el-table-column prop="raiseStartDate" label="募集起始日" width="250">
					<template slot-scope="scope">
						<div class="shidene">
							<div style="border-right: 1px solid #ebeef5">
								{{ scope.row.csDataDTO.raiseStartDate }}
							</div>
							<div :class="!scope.row.productInfoDTO.isRaiseStartDateSame ? '' : 'buyiyangne'">
								{{ scope.row.productInfoDTO.raiseStartDate }}
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="name" label="基金经理名称" width="360">
					<template slot-scope="scope">
						<div class="shidene">
							<div style="border-right: 1px solid #ebeef5">
								{{ scope.row.csDataDTO.managerName }}
							</div>
							<div :class="!scope.row.productInfoDTO.isManagerNameSame ? '' : 'buyiyangne'">
								<span v-if="!!scope.row.productInfoDTO.managerNames">
									{{ scope.row.productInfoDTO.managerNames.join(',') }}
								</span>
							</div>
						</div>
					</template>
				</el-table-column>

				<el-table-column prop="formalEvolveDate" label="正式转型日期" width="250">
					<template slot-scope="scope">
						<div class="shidene">
							<div style="border-right: 1px solid #ebeef5">
								{{ scope.row.csDataDTO.formalEvolveDate }}
							</div>
							<div :class="!scope.row.productInfoDTO.isFormalEvolveDateSame ? '' : 'buyiyangne'">
								{{ scope.row.productInfoDTO.formalEvolveDate }}
							</div>
						</div>
					</template>
				</el-table-column>

				<el-table-column prop="status" label="产品运作状态" width="250">
					<template slot-scope="scope">
						<div class="shidene">
							<div style="border-right: 1px solid #ebeef5">
								{{ scope.row.csDataDTO.status }}
							</div>
							<div :class="!scope.row.productInfoDTO.isStatusSame ? '' : 'buyiyangne'">
								{{ scope.row.productInfoDTO.status }}
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="bordersCustodianName" label="境外托管人中文名称" width="500">
					<template slot-scope="scope">
						<div class="shidene">
							<div style="border-right: 1px solid #ebeef5">
								{{ scope.row.csDataDTO.bordersCustodianName }}
							</div>
							<div :class="!scope.row.productInfoDTO.isBordersCustodianNameSame ? '' : 'buyiyangne'">
								{{ scope.row.productInfoDTO.bordersCustodianName }}
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="settleCurrency" label="结算币种" width="250">
					<template slot-scope="scope">
						<div class="shidene">
							<div style="border-right: 1px solid #ebeef5">
								{{ scope.row.csDataDTO.settleCurrency }}
							</div>
							<div :class="!scope.row.productInfoDTO.isSettleCurrencySame ? '' : 'buyiyangne'">
								{{ scope.row.productInfoDTO.settleCurrency }}
							</div>
						</div>
					</template>
				</el-table-column>

				<el-table-column prop="liquidationStartDate" label="清算开始日期" width="250">
					<template slot-scope="scope">
						<div class="shidene">
							<div style="border-right: 1px solid #ebeef5">
								{{ scope.row.csDataDTO.liquidationStartDate }}
							</div>
							<div :class="!scope.row.productInfoDTO.isLiquidationStartDateSame ? '' : 'buyiyangne'">
								{{ scope.row.productInfoDTO.liquidationStartDate }}
							</div>
						</div>
					</template>
				</el-table-column>

				<el-table-column prop="liquidateAccompleteDate" label="清盘完成日" width="250">
					<template slot-scope="scope">
						<div class="shidene">
							<div style="border-right: 1px solid #ebeef5">
								{{ scope.row.csDataDTO.liquidateAccompleteDate }}
							</div>
							<div :class="!scope.row.productInfoDTO.isLiquidateAccompleteDateSame ? '' : 'buyiyangne'">
								{{ scope.row.productInfoDTO.liquidateAccompleteDate }}
							</div>
						</div>
					</template>
				</el-table-column>

				<el-table-column prop="evolveBeforeCode" label="转型前产品正式代码" width="300">
					<template slot-scope="scope">
						<div class="shidene">
							<div style="border-right: 1px solid #ebeef5">
								{{ scope.row.csDataDTO.evolveBeforeCode }}
							</div>
							<div :class="!scope.row.productInfoDTO.isEvolveBeforeCodeSame ? '' : 'buyiyangne'">
								{{ scope.row.productInfoDTO.evolveBeforeCode }}
							</div>
						</div>
					</template>
				</el-table-column>
			</el-table>
		</el-main>
	</el-container>
</template>
<script>
	import { dataVerification, VerificationDataExport, downloadFile } from '@/api/productApi/file'
	export default {
		name: 'DataVerification',
		data() {
			return {
				fileList: [],
				tableData: [],
				loading: false
			}
		},

		activated() {
			this.tableData = []
		},

		methods: {
			dataExport() {
				VerificationDataExport({ csVerificationReturnDTOS: this.tableData }).then(res => {
					if (res.code === 0) {
						downloadFile({ fid: res.data.body }).then(item => {
							if (item.msgCode === 'N') {
								this.$message({ showClose: true, message: '文件不存在', type: 'error' })
								return
							}
							if (item) {
								this.$message({
									showClose: true,
									message: '正在下载，请稍等......',
									type: 'success'
								})
								window.open(`/update/download.do?fid=${res.data.body}`)
							}
						})
					}
				})
			},

			// 上传
			toUploadFile(params) {
				this.loading = true
				dataVerification(params).then(res => {
					if (res.code === 0) {
						if (res.data.body.length) {
							res.data.body.forEach(item => {
								if (!item.csDataDTO) {
									item.csDataDTO = {}
								}
								if (!item.productInfoDTO) {
									item.productInfoDTO = {}
								}
								[
									{ property: 'fundFullName', valid: 'isFundFullNameSame' },
									{ property: 'fundName', valid: 'isFundNameSame' },
									{ property: 'operateMode', valid: 'isOperateModeSame' },
									{ property: 'fundType', valid: 'isFundTypeSame' },
									{ property: 'trusteeName', valid: 'isTrusteeNameSame' },
									{ property: 'establishDate', valid: 'isEstablishDateSame' },
									{ property: 'raiseStartDate', valid: 'isRaiseStartDateSame' },
									{ property: 'managerNames', valid: 'isManagerNameSame' },
									{ property: 'formalEvolveDate', valid: 'isFormalEvolveDateSame' },
									{ property: 'status', valid: 'isStatusSame' },
									{ property: 'bordersCustodianName', valid: 'isBordersCustodianNameSame' },
									{ property: 'settleCurrency', valid: 'isSettleCurrencySame' },
									{ property: 'liquidationStartDate', valid: 'isLiquidationStartDateSame' },
									{ property: 'liquidateAccompleteDate', valid: 'isLiquidateAccompleteDateSame' },
									{ property: 'evolveBeforeCode', valid: 'isEvolveBeforeCodeSame' }
								].forEach(items => {
									if (items.property !== 'managerNames') {
										const csDataValue = item.csDataDTO[items.property] ? item.csDataDTO[items.property] : ''
										const productInfoalue = item.productInfoDTO[items.property] ? item.productInfoDTO[items.property] : ''
										if (!csDataValue.trim()) {
											if (csDataValue.trim() === productInfoalue.trim()) {
												item.productInfoDTO[items.valid] = null
											} else {
												item.productInfoDTO[items.valid] = '1'
											}
										}
									} else {
										const csDataValue = item.csDataDTO['managerName'] ? item.csDataDTO['managerName'] : ''
										const productInfoalue = item.productInfoDTO['managerNames']
											? item.productInfoDTO['managerNames'].join(',')
											: [].join(',')
										if (!csDataValue.trim()) {
											if (csDataValue.trim() === productInfoalue.trim()) {
												item.productInfoDTO[items.valid] = null
											} else {
												item.productInfoDTO[items.valid] = '1'
											}
										}
									}
								})
							})
							this.tableData = res.data.body
						}
						this.$message({ type: 'success', message: res.msg })
					} else {
						this.$message({ type: 'error', message: res.msg })
					}
					this.$nextTick(() => {
						this.loading = false
					})
					this.fileList = []
				})
			}
		}
	}
</script>
<style lang="scss" scoped >
	.el-footer {
		background-color: #b3c0d1;
		color: #333;
		text-align: center;
	}

	.el-header {
		background-color: white;
		color: #333;
		text-align: center;
		margin-bottom: 16px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.el-main {
		background-color: white;
		color: #333;
		text-align: center;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
		width: 100%;
		min-height: 700px;
	}
	::v-deep td {
		padding: 0;
		border-right: 1px solid #c0c4cc !important;
	}
	::v-deep .cell {
		padding-left: 0 !important;
		padding-right: 0;
		text-align: center;
		height: 70px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.shidene {
		width: 100%;
		height: 100%;
		display: flex;
		div {
			width: 50%;
			padding: 5px;
			display: flex;
			align-items: center;
			text-align: left;
		}
	}
	::v-deep th {
		text-align: center;
		border-right: 1px solid #c0c4cc !important;
		border-bottom: 1px solid #c0c4cc !important;
		.cell {
			height: 20px;
			line-height: 20px;
		}
	}
	::v-deep .el-breadcrumb__item {
		font-size: 14px;
		font-weight: 500;
		font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
	}
	::v-deep .el-breadcrumb__inner {
		font-weight: 500 !important;
		font-size: 14px;
		font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
	}
	.yuandianya {
		width: 10px;
		height: 10px;
		background-color: #f56c6c;
		border-radius: 50%;
		margin-right: 10px;
	}
	.yuandianpar {
		display: flex;
		align-items: center;
		color: #f56c6c;
		font-size: 14px;
	}
	.buyiyangne {
		background: #fde2e2;
		color: #f56c6c;
		margin: 2px;
	}
</style>

